<template>
    <view>
        <custom>
            <template #backText>{{page.form.mp_id ? '编辑' : '添加'}}邮费模板</template>
            <template #right v-if="page.form.mp_id">
                <view class="action" @tap="deleteDialog = true">
                    <text class="cuIcon-delete"></text>
                </view>
            </template>
        </custom>
        <nFormItem :is_must="true" title="模板名称" :data.sync="data" field="name"></nFormItem>
        <nFormItem :is_must="true" title="运费价格" :data.sync="data" field="mail_price" format="digit"></nFormItem>
        <nFormItem title="免运费价" placeholder="订单价格达到这个数额免运费" :data.sync="data" field="free_order_price"
            :is_n1_then_empty="true" format="digit"></nFormItem>
        <nFormItem type="checkbox" title="适用地区" value="未选择的地区不能购买商品" :data.sync="page_data_tmp" field="province_codes"
            :checkbox_list="page.province_list" :checkbox_disableds="page.disabled_province_codes" checkbox_basis="25"></nFormItem>
        <foot :title="(page.form.mp_id ? '编辑' : '添加') + '邮费模板'" :tap="update"></foot>
        <modalDialog :show.sync="deleteDialog" :confirm="update" content="确定要删除该邮费模板吗？">
        </modalDialog>
    </view>
</template>

<script>
    import formProvinceCityArea from '@/components/nddyny/form/provinceCityArea.vue';
    import province_list from '../../../../components/simple-address/city-data/province2.js'
    export default {
        components: {
            formProvinceCityArea,
        },
        data() {
            return {
                deleteDialog: false,
                page_data_tmp: {
                    form: {
                        province_codes: [],
                    }
                },
                page: {
                    form: {
                        mp_id: null
                    },
                    province_list: province_list,
                    province_codes: [],
                    disabled_province_codes: [],
                    current_mail_price_area_list: [],
                },
                data: {
                    formtag: {},
                    form: {
                        mp_id: '',
                        name: '',
                        mail_price: '',
                        free_order_price: '',
                        delete_mpa_ids: '',
                        insert_province_codes: ''
                    }
                }
            }
        },
        onLoad(params) {
            if (!this.$nddyny.object.empty(params)) {
                this.page.form = params;
            }
            this.$api.post(this, {
                url: '/seller/itemMailPrice/info',
                data_key: 'page',
                success: (Result, data_key) => {
                    if (this.$api.form.toast(this, Result, data_key)) return;
                    let mail_price_info = Result.result.mail_price_info;
                    let current_mail_price_area_list = Result.result.current_mail_price_area_list;
                    let selected_mail_price_area_list = Result.result.selected_mail_price_area_list;
                    if (mail_price_info) {
                        this.data.form.mp_id = mail_price_info.mp_id;
                        this.data.form.name = mail_price_info.name;
                        this.data.form.mail_price = mail_price_info.mail_price;
                        this.data.form.free_order_price = mail_price_info.free_order_price;
                    }
                    let current_province_codes = [];
                    if (current_mail_price_area_list) {
                        current_mail_price_area_list.forEach(current_mail_price_area_info => {
                            current_province_codes.push(current_mail_price_area_info.province_code);
                        })
                        this.page_data_tmp.form.province_codes =
                            this.$nddyny.object.copy(current_province_codes);
                        this.page.province_codes = this.$nddyny.object.copy(current_province_codes);
                    }
                    let selected_province_codes = [];
                    selected_mail_price_area_list.forEach(selected_mail_price_area_info => {
                        selected_province_codes.push(selected_mail_price_area_info.province_code);
                    })
                    this.page.disabled_province_codes = this.$nddyny.object.copy(
                        this.$nddyny.array.diff(selected_province_codes, current_province_codes)
                    );
                    this.page.current_mail_price_area_list = current_mail_price_area_list ? this.$nddyny.object
                        .copy(
                            current_mail_price_area_list
                        ) : [];
                }
            });
        },
        watch: {
            'page_data_tmp.form.province_codes'() {
                let insert_province_codes = this.$nddyny.array.diff(
                    this.page_data_tmp.form.province_codes, this.page.province_codes
                );
                let delete_province_codes = this.$nddyny.array.diff(
                    this.page.province_codes, this.page_data_tmp.form.province_codes
                );
                this.data.form.insert_province_codes = insert_province_codes.join(',');
                let delete_mpa_ids = [];
                this.page.current_mail_price_area_list.forEach(info => {
                    if (delete_province_codes.includes(info.province_code)) {
                        delete_mpa_ids.push(info.mpa_id);
                    }
                })
                this.data.form.delete_mpa_ids = delete_mpa_ids.join(',');
            }
        },
        methods: {
            update() {
                const is_delete = this.deleteDialog ? 1 : 0;
                const message_type = is_delete == 0 ? '保存' : '删除';
                if (this.data.form.free_order_price < 0) {
                    this.data.form.free_order_price = '';
                }
                this.$api.post(this, {
                    loading: message_type + '中',
                    url: '/seller/itemMailPrice/update',
                    data_append: {
                        is_delete: is_delete
                    },
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result)) return;
                        if (is_delete) this.deleteDialog = false;
                        this.$store.commit('userToastSuccess', {
                            message: message_type + '成功',
                            commit: 'appBackPage'
                        });
                    }
                });
            }
        },
    }
</script>
